<template>
    <div>
        
        <h2>房型添加</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">房型名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.roomTypeName" placeholder="请输入房型名称"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">门市价</td>
                    <td>
                        <input type="text" v-model="queryInfo.price" placeholder="请输入门市价"/>元
                    </td>
                </tr>
                <tr>
                    <td align="right">房型面积</td>
                    <td>
                        <input type="text" v-model="queryInfo.asay"/>m²
                    </td>
                </tr>
                <tr>
                    <td align="right">可住人数</td>
                    <td>
                        <input type="text" v-model="queryInfo.count"/>人
                    </td>
                </tr>
                <tr>
                    <td align="right">是否可加床</td>
                    <td>
                        
                        <input type="radio" name="isBarty" :value="1" v-model="queryInfo.isBarty" />不可加床
                        <input type="radio" name="isBarty" :value="2"  v-model="queryInfo.isBarty"/>免费加床
                        <input type="radio" name="isBarty" :value="3" v-model="queryInfo.isBarty"/>收费加床
                        <input type="radio" name="isBarty" :value="0" v-model="queryInfo.isBarty"/>自定义
                    </td>
                </tr>
                <tr>
                    <td align="right">房型照片</td>
                    <td>
                        <input type="file" @change="getphoto"/>
                        <img :src="queryInfo.photo" width="60px" height="60px"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">房型介绍</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="queryInfo.roomDesc">

                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" @click="ok" value="添加房型" class="btn btn-primary" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
let route=useRoute();
let router=useRouter();
let queryInfo=reactive({
    
    roomTypeName: "",
    price: "",
    asay: "",
    count: "",
    isBarty: 1,
    photo: "",
    roomDesc: ""
})
const getphoto=(e:any)=>{
    let file=e.target.files[0];
    let fromdata=new FormData();
    fromdata.append("file",file);
    axios({
        url:'/api/Photo/GetPhoto',
        method:'post',
        data:fromdata
    })
    .then((res)=>{
        console.log(res);
        if(queryInfo.photo=="图片不能大于2M"){
        alert('图片不能大于2M');
        return;
    }
    if(queryInfo.photo=="不是图片"){
        alert('不是图片');
        return;
    }
        queryInfo.photo=res.data;
    })
    .catch((erro)=>{
        console.log(erro);
    })
}
const ok=()=>{
    if(queryInfo.roomTypeName==''){
        alert('房型名称不能为空');
        return;
    }
    if(queryInfo.price==''){
        alert('门市价不能为空');
        return;
    }
    if(queryInfo.asay==''){
        alert('房型面积不能为空');
        return;
    }
    if(queryInfo.count==''){
        alert('可住人数不能为空');
        return;
    }
    if(queryInfo.photo==''){
        alert('请上传图片');
        return;
    }
    
    
    if(queryInfo.roomDesc==''){
        alert('房型介绍不能为空');
        return;
    }
    axios({
        url:'/api/RoomType/RoomTypeAdd',
        method:'post',
        data:
            queryInfo
        
    })
    .then((res)=>{
        console.log(res);
        if(res.data==1){
            alert('房型添加成功');
            
        }
        else if(res.data==-1){
            alert('房间名称已存在')
        }

        else{
            alert('房型添加失败');
        }
        
    })
}
</script>

<style scoped>

</style>